<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-02-01 15:01:07
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-30 10:41:58
-->
<template>
  <!-- <x-dialog
    :title="title"
    :show.sync="visible"
    :submitShow="false"
    :fullscreen="true"
    @onCancel="visible = false"
    v-if="visible"
    :before-close="handleClose"
  > -->
  <el-drawer
    :title="title"
    size="50%"
    :with-header="false"
    :visible.sync="visible"
    :direction="'rtl'"
    :before-close="handleClose"
  >
    <div class="notice-panel">
      <div class="main-panel">
        <div class="notice-hearder">
          <h4>{{ noticeInfo.noticeTitle }}</h4>
          <div class="notice-desc flex-between">
            <div class="info-item">
              <label class="info-title">{{ $t('system.announcement.type') }}:</label>
              {{ noticeInfo.noticeTypeText }}
            </div>
            <div class="info-item">
              <label class="info-title">{{ $t('system.announcement.data') }}:</label>
              {{ noticeInfo.noticeTime?.split(' ')[0] }}
            </div>
          </div>
        </div>
        <el-scrollbar class="notice-contant" wrap-class="scrollbar-wrapper">
          <div v-html="noticeInfo.noticeContext" class="notice-text"></div>
        </el-scrollbar>
      </div>
      <div class="footer-panel info-item" v-if="noticeInfo?.files">
        <label class="info-title">{{ $t('system.announcement.files') }}:</label>
        <x-upload ref="fileUpload" :span="12" :edit-flag="false" :old-file-list="noticeInfo.files"> </x-upload>
      </div>
    </div>
    <!-- </x-dialog> -->
  </el-drawer>
</template>
<script>
  import { apiGetNotice } from '../api/announcement'

  export default {
    data() {
      return {
        visible: false,
        title: this.$t('common.preview'),
        noticeInfo: {
          noticeTitle: '详情'
        }
      }
    },
    methods: {
      handleOpen(info) {
        this.noticeInfo = JSON.parse(JSON.stringify(info))
        apiGetNotice(info.id).then(({ data }) => {
          this.noticeInfo = Object.assign(this.noticeInfo, data)
        })
        this.visible = true
      },
      handleClose() {
        this.visible = false
      }
    }
  }
</script>
<style scoped>
  .notice-panel {
    padding: 20px;
    color: #42464d;
    height: 100%;
  }
  .main-panel {
    /* height: calc(100% - 110px); */
  }
  .notice-hearder {
    line-height: 40px;
    padding-bottom: 20px;
  }
  .notice-desc {
    border-bottom: 1px solid #ccc;
  }
  .notice-contant {
    /* height: calc(100% - 100px); */
  }
  .footer-panel {
    border-top: 1px solid #ccc;
    line-height: 40px;
  }
  h4 {
    color: #333;
    text-align: center;
    font-size: 18px;
  }
  .notice-text {
    font-size: 16px;
    padding: 10px 0;
    line-height: 30px;
  }
</style>
<style lang="scss">
  /* element滚动条组件 隐藏水平滚动条 */
  .notice-panel .el-scrollbar__view {
    padding: 0 15px;
  }
  .notice-panel .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-drawer__body {
    overflow-x: hidden;
  }
  .is-horizontal {
    display: none;
  }
</style>
